<template>
    <u-popup :show="true" mode="bottom" @close="close" closeable :closeOnClickOverlay="false" :duration="100">
        <view class="topUp">
            <text class="row j-centert black size30 bold">充值{{ Unit }}前请确认账户是否正确</text>

            <view class="placeInputBox">
                <view
                    class="iconfont black size42 bold"
                    :class="Type == 'jifen' ? 'icon-jifen-xianxing' : 'icon-qianqian-'"></view>
                <input
                    type="text"
                    v-model="money"
                    disabled
                    class="placeInput"
                    :placeholder="` 请输入${Unit}`"
                    :placeholder-class="`placeholder`" />
            </view>
        </view>
        <view class="quota">
            <view class="telNum_box">
                <view class="Num_list" @click.stop="placeInput(1)">1</view>
                <view class="Num_list" @click.stop="placeInput(2)">2</view>
                <view class="Num_list" @click.stop="placeInput(3)">3</view>
                <view class="Num_list" @click.stop="placeInput(11)">
                    <view class="iconfont icon-huishan size50 black"></view>
                </view>
                <view class="Num_list" @click.stop="placeInput(4)">4</view>
                <view class="Num_list" @click.stop="placeInput(5)">5</view>
                <view class="Num_list" @click.stop="placeInput(6)">6</view>
                <view class="Num_list Confirm" :class="{ active: money }" @click.stop="placeInput(12)">确定</view>
                <view class="Num_list" @click.stop="placeInput(7)">7</view>
                <view class="Num_list" @click.stop="placeInput(8)">8</view>
                <view class="Num_list" @click.stop="placeInput(9)">9</view>
                <view class="Num_list Zero" @click.stop="placeInput(0)">0</view>
                <view class="Num_list" :class="{ bgf8: Type == 'jifen' }" @click.stop="placeInput('.')">
                    <view class="dot" :class="{ bgAF: Type == 'jifen' }"></view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        props: ['Type', 'vid'],
        data() {
            return {
                money: '',
            }
        },
        methods: {
            placeInput(val) {
                if (this.Type == 'jifen' && val == '.') return

                if (val == 12) return this.Continue()
                if (val == 11 && !this.money) return
                if (val == 11) return (this.money = this.money.slice(0, -1))
                if (this.money && this.money.includes('.') && val == '.') return

                this.money = `${this.money}${val}`.replace(/(\d*\.\d{2})\d*/, '$1')

                const resultArr = this.money.split('')
                if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] == '0') {
                    this.money = this.money.slice(0, -1)
                } else if (resultArr[0] == '.') {
                    this.money = '0.'
                } else if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] != '0' && resultArr[1] != '.') {
                    this.money = resultArr[1]
                }
            },
            close() {
                this.$emit('Cancel')
            },
            Continue() {
                if (!this.money) return
                let Url
                if (this.Type == 'money') Url = '/singleSaleManageApi/rechargeMoney'
                if (this.Type == 'jifen') Url = '/singleSaleManageApi/rechargeJifen'
                const requestData = {
                    v_id: this.vid,
                    down_v_id: this.vid,
                    money: this.money,
                    shop_id: uni.getStorageSync('store_id'),
                }
                this.$http
                    .post({
                        url: Url,
                        data: requestData,
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg)
                        this.$Toast(res.msg)
                        this.close()
                        this.$emit('Continue')
                    })
            },
        },
        computed: {
            Unit() {
                if (this.Type == 'money') return '余额'
                if (this.Type == 'jifen') return '积分'
            },
        },
    }
</script>

<style lang="scss" scoped>
    .topUp {
        width: 100%;
        padding: 40rpx 24rpx 0 24rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        position: relative;
    }

    .placeInputBox {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        margin-top: 40rpx;
        border-bottom: 1px solid #f8f8f8;
    }
    .placeInput {
        flex: 1;
        height: 100rpx;
        border-radius: 10rpx;
        padding-left: 20rpx;
        border: none;
        font-size: 50rpx;
        font-weight: bold;
        color: #000;
    }

    /deep/.placeholder {
        font-size: 36rpx;
        font-weight: normal;
    }

    .active {
        background-color: rgba(0, 102, 51, 1) !important;
        color: #ffffff;
    }
    .quota {
        width: 100%;
        padding: 20rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        background-color: #f7f7f7;
    }

    .telNum_box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 16rpx;
        margin-top: 10rpx;
    }

    .Num_list {
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 46rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
    }

    .Confirm {
        height: 100%;
        grid-column: 4 / span 1;
        grid-row: 2 / span 3;
        font-weight: normal !important;
        font-size: 34rpx !important;
        background-color: rgba(0, 102, 51, 0.5);
        color: #ffffff;
    }

    .Zero {
        width: 100%;
        grid-column: 1 / span 2;
        grid-row: 4 / span 1;
    }

    .dot {
        width: 6rpx;
        height: 6rpx;
        background-color: #000;
        border-radius: 50%;
    }
    .bgf8 {
        background-color: #f1f1f1;
    }
    .forbid {
        background-color: #f1f1f1 !important;
        color: #ccc;
    }
    .bgAF {
        background-color: #ccc;
    }
</style>
